<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
        }

        h1 {
            text-align: center;
        }

        span {
            width: 40px;
            height: 40px;
            background: pink;
            border-radius: 50%;
            line-height: 40px;
            text-align: center;
            font-size: 30px;
            font-weight: bold;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <h1>您的得分是：<strong>0</strong></h1>
    <script>



        const oScore = document.querySelector('strong');


        let char;
        let oSpan;
        let timer;

        tagDes();



        function tagDes() {
            char = randChar();
            // console.log(char);
            oSpan = document.createElement('span');
            oSpan.innerHTML = char;
            document.body.appendChild(oSpan);
            oSpan.style.left = randRange(0, document.body.clientWidth - oSpan.clientWidth) + 'px';
            var i = 0;
            timer = setInterval(function () {
                i = i + 3;
                oSpan.style.top = i + 'px';
                if (i >= document.body.clientHeight - oSpan.clientHeight) {
                    clearInterval(timer);
                    oSpan.remove();
                    tagDes()
                }
            }, 15);

        }




        document.onkeydown = function (e) {
            if (e.key == char.toLowerCase()) {
                clearInterval(timer);
                // document.body.removeChild(oSpan);
                oSpan.remove();
                oScore.innerHTML++;
                tagDes();
            }
        }



























        function randChar() {
            allArr = '1234567890qwertyuiopasdfghjklzxcvbnmABCDEFGHIJKLMNOPQRSTUVWXYZ';
            return allArr[Math.floor(Math.random() * allArr.length)];
        }


        function randRange(min, max) {
            return Math.floor(Math.random() * (max + min) - min);
        }
    </script>
</body>

</html>